console.log(location.href);
let href = decodeURI(location.href);
console.log(href);
let categoryId = href.split('?')[1].split('=')[1];
console.log(categoryId);

fetch('http://chst.vip:1234/api/getcategorybyid?categoryid='+categoryId)
.then(function(c){
    return c.json();
})
.then(function(b){
    console.log(b);
    let str = '';
    b.result.forEach(item => {
        str +=`<a href="./电商首页.html">首页></a><a href="./category.html">全部分类</a>>${item.category}>`
    });
    $('section .left').html(str);
})

let pageid = 1;
console.log(pageid);
fetch('http://chst.vip:1234/api/getproductlist?'+'categoryid='+categoryId+'&'+'pageid='+pageid)
.then(function(c){
    return c.json()
})
.then(function(a){
    console.log(a);
    let str='';
    a.result.forEach(item => {
        // let c = item.productImgSm.split(' ')[1].split('=')[3]
        console.log(item.productId);
        str +=`<li productId=${item.productId}>
                    <div class="left">
                       ${item.productImg}
                    </div>
                    <div class="right">
                        <div class="top">
                            ${item.productName}
                        </div>
                        <div class="center">
                            ${item.productPrice}
                        </div>
                        <div class="bottom">
                            <p>${item.productQuote}</p>
                            <p class="iconfont icon-xiaoxi">${item.productCom}</p>
                        </div>
                    </div>
                </li>`
    });
    $('ul').html(str);
    let str1 = '';
    let pageZ = Math.floor(a.totalCount/a.pagesize);
    console.log(pageZ);
    for(var i=1;i<=pageZ;i++){
        str1 +=` <option value=${i}>${i}/${pageZ}</option>`
    }
    console.log(str1);
    $('#sw').html(str1)
    $('#sw').attr('pageZ',pageZ) 
    console.log( $('#sw').attr('pageZ'));
})
.then(function(){
    $('ul').on('click','li',function(){
        
        let productId = $(this).attr('productId')
        console.log(productId);
        location.href='./category_2.html?productId='+productId+'&'+'categoryId='+categoryId;
    })
})

// 下一页
$('#down').onclick=function(){
    pageid++;
    if(pageid>$('#sw').attr('pageZ')){
        pageid=$('#sw').attr('pageZ');
    }
    fetch('http://chst.vip:1234/api/getproductlist?'+'categoryid='+categoryId+'&'+'pageid='+pageid)
    .then(function(c){
        return c.json()
    })
    .then(function(a){
        console.log(a);
        let str='';
        a.result.forEach(item => {
            // let c = item.productImgSm.split(' ')[1].split('=')[3]
            str +=`<li>
                    <div class="left">
                       ${item.productImg}
                    </div>
                    <div class="right">
                        <div class="top">
                            ${item.productName}
                        </div>
                        <div class="center">
                            ${item.productPrice}
                        </div>
                        <div class="bottom">
                            <p>${item.productQuote}</p>
                            <p class="iconfont icon-xiaoxi">${item.productCom}</p>
                        </div>
                    </div>
                </li>`
        });
        $('ul').html(str);
        $('option')[pageid-1].selected=true;
    })
}

// 上一页

$('#up').onclick=function(){
    pageid--;
    if(pageid<1){
        pageid=1;
    }
    fetch('http://chst.vip:1234/api/getproductlist?'+'categoryid='+categoryId+'&'+'pageid='+pageid)
    .then(function(c){
        return c.json()
    })
    .then(function(a){
        console.log(a);
        let str='';
        a.result.forEach(item => {
            // let c = item.productImgSm.split(' ')[1].split('=')[3]
            str +=`<li>
            <div class="left">
               ${item.productImg}
            </div>
            <div class="right">
                <div class="top">
                    ${item.productName}
                </div>
                <div class="center">
                    ${item.productPrice}
                </div>
                <div class="bottom">
                    <p>${item.productQuote}</p>
                    <p class="iconfont icon-xiaoxi">${item.productCom}</p>
                </div>
            </div>
        </li>`
        });
        $('ul').html(str);
        $('option')[pageid-1].selected=true;
    })
}

// 中间选择
$('#sw').onclick=function(ev){
    let e = ev || window.event;
    let target = e.target || e.srcElement;
    console.log(target.value);
    pageid=target.value;
    fetch('http://chst.vip:1234/api/getproductlist?'+'categoryid='+categoryId+'&'+'pageid='+pageid)
    .then(function(c){
        return c.json()
    })
    .then(function(a){
        console.log(a);
        let str='';
        a.result.forEach(item => {
            // let c = item.productImgSm.split(' ')[1].split('=')[3]
            str +=`<li>
                    <div class="left">
                       ${item.productImg}
                    </div>
                    <div class="right">
                        <div class="top">
                            ${item.productName}
                        </div>
                        <div class="center">
                            ${item.productPrice}
                        </div>
                        <div class="bottom">
                            <p>${item.productQuote}</p>
                            <p class="iconfont icon-xiaoxi">${item.productCom}</p>
                        </div>
                    </div>
                </li>`
        });
        $('ul').html(str);
        $('option')[pageid-1].selected=true;
    })
}